<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>

  <div class="box">
    <p>hello1</p>
    <p>hello2</p>
    <p class="p">hello3</p>
    <p>hello4</p>
    <p>hello5</p>
  </div>

  <div class="cont"></div>
  
</body>
<script>

  // var box = document.querySelector(".box");
  // var cont = document.querySelector(".cont");

  // // 创建
  // var span1 = document.createElement("span");
  // var span2 = document.createElement("span");
  // // console.log(span)

  // // 插入
  // box.appendChild( span1 );

  // span1.innerHTML = "这是一个span";
  // span2.style.background = "red";
  // span1.onclick = function(){
  //   console.log("1111")
  // }

  // cont.appendChild(span2);

  // =======

  // 父元素.insertBefore(新元素, 老元素)

  // var box = document.querySelector(".box")
  // var p = document.querySelector(".box .p")
  // var span = document.createElement("span")
  // box.insertBefore(span, p);

  // ========


  // var p = document.querySelector(".box .p")
  // var box = document.querySelector(".box")

  // p.remove();

  // 父元素.removeChild(子元素)
  // box.removeChild(p);


  // ========


  // 改的需求，几乎不存在

  // var box = document.querySelector(".box")

  // console.log(box.outerHTML)

  // box.outerHTML = "<span>"+ box.innerHTML +"</span>"


  // ========

  // 替换子元素
  // var box = document.querySelector(".box")
  // var p = document.querySelector(".box .p")
  // var span = document.createElement("span")

  // box.replaceChild( span, p );


  // =======

  // var box = document.querySelector(".box");
  // var box1 = box.cloneNode(true);
  // 克隆之后，类似于创建元素，需要插入
  // document.body.appendChild(box1);
  // console.log(box);
  // console.log(box1);

  
  // var box = document.querySelector(".box");
  // xxx.innerHTML = box.outerHTML;


  
</script>
</html>